<template>
  <div class="home">
    <el-table v-loading="loading" :data="tableRes.list" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <Pagination :current-page="params.page" :page-size="params.limit" :total="tableRes.total" @current-change="pageCurrentChangeHandle" @size-change="pageSizeChangeHandle"></Pagination>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
const params = ref({
  page: 1,
  limit: 10
});
const tableRes = ref({
  list: [],
  total: 0
})
const loading = ref(false)
// 模拟接口请求
const fetchList = () => {
  loading.value = true
  setTimeout(() => {
    const {page, limit} = params.value
    const length = 23 - limit > (page - 1) * limit ? page * limit : 23
    const list = []
    for (let index = (page - 1) * limit; index < length; index++) {
      list.push({
        date: '2016-05-0' + (index + 1),
        name: 'Tom' + (index + 1),
        address: 'No. 189, Grove St, Los Angeles',
      })
    }
    tableRes.value = {
      list,
      total: 23
    }
    loading.value = false
  }, 1000);
  
}
// 分页条数变化
const pageSizeChangeHandle = (limit: number) => {
  params.value.limit = limit;
  params.value.page = 1;
  fetchList();
};
watch(
  () => params.value.limit,
  val => pageSizeChangeHandle(val)
)
// 翻页
const pageCurrentChangeHandle = (page: number) => {
  params.value.page = page;
  fetchList();
};
watch(
  () => params.value.page,
  val => pageCurrentChangeHandle(val)
)

onMounted(() => {
  fetchList();
})
</script>
